<!--文章管理-->
<template>
    <div>
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
            <!--个人中心部分-->
            <el-tab-pane :label='item.name' :name="item.name" v-for="item in arr">
                <el-row :gutter="20">
                    <el-col :span="14">
                        <el-button type="primary" @click="go">发布文章</el-button>
                    </el-col>
                    <el-col :span="10">
                        <el-form :label-position="labelPosition" label-width="80px" :inline="true" :model="pageAbout">
                        <el-form-item prop="title">
                            <el-input placeholder="输入关键词搜索" v-model="pageAbout.title" ></el-input>
                        </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="resetForm()">重置</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="found">查找</el-button>
                            </el-form-item>
                    </el-form></el-col>
                </el-row>
                <div class="dateMsg" v-if="pageCount" style="color: red">总计<b>{{pageCount}}</b>条数据</div>
                <el-table :data="tableData" style="width: 100%" v-loading="listLoading">
                    <el-table-column prop="title" label="文章标题" :formatter="banFormatLength">
                    </el-table-column>
                    <el-table-column prop="flag" label="状态" :formatter="banFormat">
                    </el-table-column>
                    <el-table-column prop="abstracts" label="摘要" :formatter="banFormatLength2">
                    </el-table-column>
                    <el-table-column prop="updatetime" label="最后更新时间" >
                    </el-table-column>
                    <el-table-column prop="article_programa_id" label="栏目">
                    </el-table-column>
                    <!--<el-table-column prop="date" label="能力项">-->
                    <!--</el-table-column>-->
                    <el-table-column prop="operator" label="最后操作人">
                    </el-table-column>
                    <el-table-column prop="date" label="管理">
                        <template scope="scope">
                            <el-button  type="text" size="small" @click="look(scope.row.id)">查看</el-button>
                            <el-button type="text" size="small" @click="edit(scope.row.id)">编辑</el-button>
                            <el-button v-if="scope.row.flag==1" type="text" size="small" @click="forBidden(scope.row.id,2)">启用</el-button>
                            <el-button v-else type="text" size="small" @click="forBidden(scope.row.id,1)">禁用</el-button>
                            <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                            <!--<el-button v-else type="text" size="small" @click="forBidden(scope.row.enterprise_id,1)">禁用</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" style="width:200px;margin-top:10px;margin-left:75% ">
                    <el-pagination layout="prev, pager, next"  :total='pageCount' @current-change="getCurrentpage" :page-size=10></el-pagination>
                </div>
            </el-tab-pane>
            <!--生态圈部分-->
            <!--<el-tab-pane label="生态圈">-->
                <!--<el-row :gutter="20">-->
                    <!--<el-col :span="14">-->
                        <!--<el-button type="primary" @click="go">发布文章</el-button>-->
                    <!--</el-col>-->
                    <!--<el-col :span="10">-->
                        <!--<el-form :label-position="labelPosition" label-width="80px" :inline="true" ref="form" :model="pageAbout">-->
                            <!--<el-form-item prop="title">-->
                                <!--<el-input placeholder="输入关键词搜索" v-model="pageAbout.title" ></el-input>-->
                            <!--</el-form-item>-->
                            <!--<el-form-item>-->
                                <!--<el-button type="primary" @click="resetForm('form')">重置</el-button>-->
                            <!--</el-form-item>-->
                            <!--<el-form-item>-->
                                <!--<el-button type="primary" @click="found">查找</el-button>-->
                            <!--</el-form-item>-->
                        <!--</el-form></el-col>-->
                <!--</el-row>-->
                <!--<div class="dateMsg" v-if="pageCount" style="color: red">总计<b>{{pageCount}}</b>条数据</div>-->
                <!--<el-table :data="tableData" style="width: 100%" v-loading="listLoading">-->
                    <!--<el-table-column prop="title" label="文章标题" :formatter="banFormatLength">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="flag" label="状态" :formatter="banFormat">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="abstracts" label="摘要">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="updatetime" label="最后更新时间" >-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="article_programa_id" label="栏目">-->
                    <!--</el-table-column>-->
                    <!--&lt;!&ndash;<el-table-column prop="date" label="能力项">&ndash;&gt;-->
                    <!--&lt;!&ndash;</el-table-column>&ndash;&gt;-->
                    <!--<el-table-column prop="operator" label="最后操作人">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="date" label="管理">-->
                        <!--<template scope="scope">-->
                            <!--<el-button  type="text" size="small" @click="look(scope.row.id)">查看</el-button>-->
                            <!--<el-button type="text" size="small" @click="edit(scope.row.id)">编辑</el-button>-->
                            <!--<el-button v-if="scope.row.flag==1" type="text" size="small" @click="forBidden(scope.row.id,2)">启用</el-button>-->
                            <!--<el-button v-else type="text" size="small" @click="forBidden(scope.row.id,1)">禁用</el-button>-->
                            <!--<el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>-->
                            <!--&lt;!&ndash;<el-button v-else type="text" size="small" @click="forBidden(scope.row.enterprise_id,1)">禁用</el-button>&ndash;&gt;-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                <!--</el-table>-->
                <!--<div class="pagination" style="width:200px;margin-top:10px;margin-left:75% ">-->
                    <!--<el-pagination layout="prev, pager, next"  :total='pageCount' @current-change="getCurrentpage" :page-size=10></el-pagination>-->
                <!--</div>-->
            <!--</el-tab-pane>-->
        </el-tabs>
    </div>
</template>
<script>
    import _http from '@/components/common/http.vue'
    import _param from '@/components/common/param.vue'
    export default {
        data() {
            return {
                arr:[],
                id1:'',
                id2:'',
                name:'',
                listLoading:false,
                currentPage:1,
                pageCount:0,
                pageAbout:{
                    userid:'',
                    title:'',
                    pageNumber:1,
                    pageSize:10,
                    article_programa_id:'',
                },
                apiPort:{
///                    文章列表页内容接口
                    arcList:"article/list",
//                    启用禁用
                    statusC:'article/changeFlag',
//                    删除接口
                    del:'article/delete',
                    getid:'article/getPageArticle'
                },
                activeName: '',
                labelPosition: 'right',
                tableData: []
            };
        },
        mounted(){


            this.userid=localStorage.getItem('userId')
            this.pageAbout.userid = localStorage.getItem('userId')
            this.getid()
            this.limit = JSON.parse(localStorage.getItem("limitList"))
            this.yanshi()
        },
        methods: {
            getid(){
                var that = this
                var params = that.querystring.stringify({userid:this.userid})
                _http.axiosRequest(that,that.apiPort.getid,params,(res)=>{
                    console.log(res.data.data)
                that.arr = res.data.data
                that.activeName=res.data.data[0].name
//                that.id1 = res.data.data[0].id
                that.pageAbout.article_programa_id=res.data.data[0].id
//                that.id2 = res.data.data[1].id
            })
            },
            yanshi(){
                var that=this
                setTimeout(function(){
                    that.getCurrentpage(1)
                },300)
            },
            found(){
                this.pageAbout.pageNumber=1
                this.getCurrentpage(1)
            },
            resetForm(){
//                this.$refs[formName].resetFields();
                this.pageAbout.title=''
            },
            banFormat:function(row,column){
                var ban = row[column.property];
                if ( ban == 1 ){
                    return "禁用";
                }
                return "启用";
            },
            banFormatLength:function(row,column){
                var ban = row[column.property];
                if ( ban.length >15  ){
                    return ban.substring(0,11)+'...' ;
                }
                return ban;
            },
            banFormatLength2:function(row,column){
                var ban = row[column.property]?row[column.property]:'';
                if ( ban.length >15  ){
                    return ban.substring(0,11)+'...' ;
                }
                return ban;
            },
            //跳转到指定页
            getCurrentpage(val){
                this.listLoading=true
                var that = this
                this.currentPage = val ? val:1
                this.pageAbout.pageNumber=val ? val:1
                var params = that.querystring.stringify(this.pageAbout)
                _http.axiosRequest(that,that.apiPort.arcList,params,(res)=>{
                    console.log(res)
                    that.pageCount=res.data.data.total
                this.listLoading=false
                that.tableData = res.data.data.records
            })
            },
            //        启用禁用
            forBidden(id,par){
                var that = this
                var param = {'id':id,flag:par,userid:that.userid}
                var params = that.querystring.stringify(param)
                _http.axiosRequest(that,that.apiPort.statusC,params,(res)=>{
                    console.log(res.data)
                that.getCurrentpage(that.currentPage)
            })
            },
//            删除接口
            del(id){
                var that = this
                this.$confirm('此操作将删除该文章, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var param = {id:id,userid:that.userid}
                    var params = that.querystring.stringify(param)
                    _http.axiosRequest(that,that.apiPort.del,params,(res)=>{
                    console.log(res.data)
                that.getCurrentpage(that.currentPage)
                if(res.data.code==100){
                    that.$message({
                        message: '删除成功',
                        type: 'success'
                    });
//                    that.getCurrentpage(that.currentPage)
                }else{
                    that.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
            }).catch(() => {

                });

//                var that = this
//                var param = {id:id,userid:that.userid}
//                var params = that.querystring.stringify(param)
//                _http.axiosRequest(that,that.apiPort.del,params,(res)=>{
//                    console.log(res.data)
//                that.getCurrentpage(that.currentPage)
//            })
            },
            handleClick(tab, event) {
                this.name = tab.name
                this.pageAbout.title=''
                for(var i in this.arr){
                    if(this.arr[i].name==this.name){
                        this.pageAbout.article_programa_id =this.arr[i].id
                        this.getCurrentpage(1)
                    }
                            }
//                if(this.name=='second'){
//                    this.pageAbout.article_programa_id =this.id1
//                    this.pageAbout.title=''
//
//                }
//                else {
//                    this.pageAbout.article_programa_id =this.id2
//                    this.pageAbout.title=''
//                    this.getCurrentpage(1)
//                }
            },
            go(){
//                router.go({name: 'fabu', params: {userId: 1}});
                this.$router.push({path:'/ariticle/fabu',query:{info:'n'}})
            },
            edit(id){
                this.$router.push({path:'/ariticle/fabu',query:{info:id}})
            },
            look(id){
                this.$router.push({path:'/ariticle/look',query:{info:id}})
            }
        }
    };
</script>